<template>
  <van-nav-bar class="head" :title="isShowContent ? '菜谱详情' : '编辑菜谱'" left-text="返回" left-arrow
    @click-left="() => { router.back() }" />
  <div v-if="isShowContent" class="form">
    <div class="img">
      <img :src="recipe.image" alt="">
    </div>
    <van-field v-model="recipe.name" label="菜谱" placeholder="请输入菜谱名" />
    <div class="showContent" v-if="isShowContent" v-html="getProcessedContent(content)"></div>
  </div>
  <div v-else class="form">
    <div class="img">
      <img :src="recipe.image" alt="">
      <div @click="selectUpload(-1, recipe.name)" class="uploadImg"><i class="iconfont icon-tianjiatupian_huaban"></i>添加
      </div>
    </div>
    <van-field v-model="recipe.name" label="菜谱" placeholder="请输入菜谱名" />
    <div>
      <div class="time">
        <i class="iconfont icon-shijian1"></i>总时长
        <van-cell-group inset>
          <van-field class="format" size="normal" v-model="recipe.time" placeholder="时长" />
        </van-cell-group>
        分钟
      </div>

      <div class="material">
        <div class="material-title">
          <div class="material-title-left">
            食材准备
          </div>
          <!-- <van-button class="btn" type="primary" size="mini" color="#FF9966">AI提示</van-button> -->
          <!-- <i class="iconfont icon-AIyijianshengcheng"></i> -->
          <div class="add" @click="addMaterial">
            +
          </div>
        </div>
        <div class="material-content" v-for="(material, index) in recipe.materials" :key="index">
          <van-field class="material-content-left" v-model="material.name" placeholder="请输入食材" />
          <van-field class="material-content-right" v-model="material.quantity" placeholder="用量" />
          <i class="iconfont icon-top" @click="deleteMaterial(index)"></i>
        </div>
      </div>
      <div class="step">
        <div class="step-title">
          <div class="step-title-left">烹饪步骤</div>
          <div class="step-title-right"><van-button @click="generateSteps(recipe.name)" type="primary" size="mini"
              color="#FF9966">AI一键生成</van-button></div>
        </div>
        <div class="step-detail" v-for="(step, index) in recipe.steps" :key="index">
          <div class="step-detail-top">
            <div class="step-detail-top-number">{{ index + 1 }}</div>
            <div class="step-detail-top-operate">
              <i class="iconfont icon-xiangji_o xiangji" @click="selectUpload(index, step.description)"></i>
              <i class="iconfont icon-top" @click="deleteStep(index)"></i>
            </div>
          </div>
          <van-field v-model="step.description" rows="2" autosize type="textarea" maxlength="100" placeholder="请输入步骤"
            show-word-limit />
          <div class="step-detail-img">
            <img :src="step.image" alt="">
          </div>
        </div>
        <van-button style="width:100%" type="default" @click="addStep">添加步骤</van-button>
      </div>
      <div class="experience">
        <div class="experience-title">
          烹饪心得
        </div>
        <van-field v-model="recipe.tips" rows="2" autosize type="textarea" maxlength="50" placeholder="请输入"
          show-word-limit />
      </div>
      <div class="operator">
        <van-button type="default" class="buttonDetail" @click="publish(0)">保存草稿</van-button>
        <van-button type="primary" class="buttonDetail" color="#FF9966" @click="publish(1)">立即发布</van-button>
      </div>
    </div>
  </div>

  <layoutPopup :show="showBottom" @update:show="val => showBottom = val" @left-click="handleUpload"
    @right-click="aiGeneratedImg()">
    <template #left-icon>
      <i class="iconfont icon-shoudongshangchuan"></i>
    </template>
    <template #left-text>
      <span>手动上传</span>
    </template>
    <template #right-icon>
      <i class="iconfont icon-AIshengcheng"></i>
    </template>
    <template #right-text>
      <span>AI 生成</span>
    </template>
  </layoutPopup>

  <van-popup v-model:show="isShow" closeable position="bottom" :style="{ height: '60%' }">
    <div class="display">
      <div class="image" v-for="item in photoArr" @click="uploadImg(item)">
        <img :src="item" alt="">
      </div>
    </div>
  </van-popup>
</template>

<script setup>
import { ref, onMounted, nextTick, watch } from 'vue';
import { useRoute } from 'vue-router';
import router from '@/router/index.js';
import { generateImg, getCommonById, updateCook } from '../api';
import { showToast, showConfirmDialog, showLoadingToast, showSuccessToast, showFailToast } from 'vant';
import { publishCook } from '@/api/index.js';
import { getUserId } from "@/utils/getUserId";
import { generateStep } from '@/api';
import { checkPermission } from '@/utils/isLogin.js';
import layoutPopup from '@/components/layoutPopup.vue';
import * as marked from 'marked'
import DOMPurify from 'dompurify'


const route = useRoute()
const recipe = ref({
  image: '',
  name: '',
  time: '',
  materials: [
    { name: '', quantity: '' }
  ],
  steps: [
    { description: '', image: '' }
  ],
  tips: '',
  authorId: getUserId(),
  publishTime: '',
  likeNum: 0,
  status: 0,
})

const id = route.query.id
const showBottom = ref(false)
const isShow = ref(false)
const imgIndex = ref(-1)   // 判断上传图片的位置在哪里
const description = ref('')   // 生成图片的提示词

const isShowContent = ref(false)

let photoArr = [
  'https://img1.baidu.com/it/u=3217838212,795208401&fm=253&fmt=auto&app=138&f=JPEG?w=514&h=500',
  'https://q9.itc.cn/q_70/images03/20240918/def2b7d32f2144099caf42b98753871e.jpeg',
  'https://q3.itc.cn/q_70/images03/20250202/a040a6744049458ab174a66457e256e5.jpeg',
  'https://q7.itc.cn/q_70/images03/20241013/d67d55313b8a46bcae63cf22cc52b2fc.jpeg',
  'https://q5.itc.cn/q_70/images03/20241116/2c262260fd534b35b0052aef28973685.png',
  'https://img1.baidu.com/it/u=1052397826,1513523633&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
  'https://img0.baidu.com/it/u=3600954679,641662266&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
  'https://img0.baidu.com/it/u=3196617431,1263013381&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
  'https://img2.baidu.com/it/u=199363802,1916398725&fm=253&fmt=auto&app=120&f=JPEG?w=503&h=500',
  'https://img1.baidu.com/it/u=252741406,3488549597&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
  'https://img0.baidu.com/it/u=647176915,2161300483&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
  'https://img1.baidu.com/it/u=3029837478,1144772205&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
  'https://img1.baidu.com/it/u=378626424,1386413315&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
  'https://img0.baidu.com/it/u=434104847,2374269041&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
  'https://img0.baidu.com/it/u=2103865173,489713918&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
  'https://img0.baidu.com/it/u=4172393334,2310871155&fm=253&fmt=auto?w=690&h=679',
  'https://img0.baidu.com/it/u=1649316660,1778684744&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
  'https://img0.baidu.com/it/u=2705597246,2913057507&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
  'https://img1.baidu.com/it/u=516839860,2898225680&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
  'https://img0.baidu.com/it/u=748217267,3633181426&fm=253&fmt=auto&app=120&f=JPEG?w=511&h=500',
  'https://img2.baidu.com/it/u=306649616,2230355986&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
  'https://img1.baidu.com/it/u=3685137112,4227852722&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
  'https://img0.baidu.com/it/u=3047293562,4139874157&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=501',
  'https://img0.baidu.com/it/u=1266305302,467693145&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
  'https://img0.baidu.com/it/u=212230986,3555547834&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
  'https://img1.baidu.com/it/u=2743394743,692629981&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
  'https://img0.baidu.com/it/u=1337201637,626583960&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
  'https://img2.baidu.com/it/u=3991893739,3800942515&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
  'https://img0.baidu.com/it/u=434104847,2374269041&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
  'https://img0.baidu.com/it/u=2103865173,489713918&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
  'https://img0.baidu.com/it/u=247754306,2011451408&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
  'https://img1.baidu.com/it/u=1010952571,1166529770&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
  'https://img1.baidu.com/it/u=2277511832,700398111&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
  'https://img0.baidu.com/it/u=2857069256,1212477516&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
  'https://img0.baidu.com/it/u=3272459002,2851349848&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
  'https://img1.baidu.com/it/u=502623422,912941866&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200',
  'https://img1.baidu.com/it/u=4118625424,727122652&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
  'https://img0.baidu.com/it/u=887837689,3539815804&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
  'https://img1.baidu.com/it/u=1028751741,3999351341&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
  'https://img2.baidu.com/it/u=3322458640,2191322390&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
  'https://img1.baidu.com/it/u=2633863535,223039645&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
  'https://img2.baidu.com/it/u=2429262046,4163636545&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=555',
  'https://img0.baidu.com/it/u=3639336606,2338613037&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400',
  'https://img0.baidu.com/it/u=2059977777,1877408961&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
  'https://img1.baidu.com/it/u=3685137112,4227852722&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
]

const uploadImg = async (imgUrl) => {
  showBottom.value = false
  imgIndex.value === -1 ? recipe.value.image = imgUrl : recipe.value.steps[imgIndex.value].image = imgUrl
  showSuccessToast('上传成功');
  isShow.value = false
}

const handleUpload = () => {
  isShow.value = true
  showBottom.value = false
}

const selectUpload = (index, desc) => {
  description.value = desc
  imgIndex.value = index
  showBottom.value = true
}


const content = ref('')

watch(
  () => content.value || '',
  async () => {
    await nextTick();
    window.scrollTo({
      top: document.body.scrollHeight,
      behavior: 'smooth'
    });
  }
);
const update = async (question) => {
  // if (question.trim() === "") return
  // isLoading.value = true; // 开始加载
  const endpoint = 'https://api.deepseek.com/chat/completions'
  const headers = {
    "Content-Type": "application/json",
    "Authorization": "Bearer sk-662f46fa3ed24f0bb17f391af374b79b"
  }

  try {
    const response = await fetch(endpoint, {
      method: "POST",
      headers,
      body: JSON.stringify({
        model: 'deepseek-chat',
        messages: [{ role: 'user', content: `我想做一道${question}` }],
        // messages: [{ role: 'user', content: `你是谁` }],
        stream: true,
      })
    })

    if (response.body) {
      const reader = response.body.getReader()
      const decoder = new TextDecoder()
      let done = false
      let buffer = ''

      while (!done) {
        const { value, done: doneReading } = await reader.read()
        done = doneReading
        const chunkValue = buffer + decoder.decode(value)
        buffer = ''
        const lines = chunkValue.split('\n').filter(line => line.startsWith('data: ') && line !== 'data: [DONE]')

        for (const line of lines) {
          const incoming = line.slice(6)
          try {
            const data = JSON.parse(incoming)
            const delta = data.choices[0].delta?.content || ''
            if (delta) {
              // 更新占位符中的内容
              content.value += delta
            }
          } catch (error) {
            console.error('解析错误:', error)
            buffer += incoming
          }
        }
      }
    } else {
      const data = await response.json()
      content.value = data.choices[0].message.content
    }
  } catch (error) {
    console.error('请求失败:', error)
    conversation.value[assistantPlaceholderIndex].content = '请求失败，请稍后再试...'
  } finally {
    // isLoading.value = false; // 结束加载
  }
}

const getProcessedContent = (markdownText) => {
  const html = marked.parse(markdownText) // 将 Markdown 转为 HTML
  return DOMPurify.sanitize(html) // 清洗 HTML，防止 XSS
}

onMounted(async () => {
  // 检查是否有缓存的 draft_recipe
  const cachedRecipe = localStorage.getItem('draft_recipe')
  if (cachedRecipe) {
    try {
      recipe.value = JSON.parse(cachedRecipe)
      localStorage.removeItem('draft_recipe') // 用完即删
    } catch (e) {
      console.error('缓存解析失败:', e)
    }
  }
  const { dishName, image, desc } = route.query
  if (dishName && image && desc) {
    recipe.value.name = dishName
    recipe.value.image = image
    recipe.value.tips = desc
    isShowContent.value = true
    // 调用 update 函数并将 dishName 传递给大模型
    await update(recipe.value.name)
  } else {
    // 获取到该菜谱进行回填
    if (id) {
      const res = await getCommonById(id);
      recipe.value = {
        ...recipe.value,
        ...res.data[0],
      };
    }
  }
})

const aiGeneratedImg = async () => {
  showBottom.value = false
  if (!description.value) {
    showFailToast(imgIndex.value === -1 ? '请先输入菜谱' : '请先输入步骤');
    return
  }
  const toast = showLoadingToast({
    message: 'AI生成中...',
    forbidClick: true,
    duration: 0, // 提示将一直显示
  });
  let res = null
  if (imgIndex.value === -1) {
    res = await generateImg(`一张专业美食摄影风格的${description.value}成品照片，摆放在白色陶瓷盘中，背景虚化，自然光线，高清8k细节，诱人的色泽，热气腾腾的效果，顶部有装饰性香草点缀`, "1024x1024")
  } else {
    res = await generateImg(`你在厨房中做菜，然后想要将自己的步骤记下来为${description.value}，然后你想要生成一张关于该步骤的图片，使得能让别人一看就会,帮我生成这个描述的图片`, '1344x768')
  }

  if (res) {
    toast.close(); // 关闭提示
    showSuccessToast('生成成功');
    imgIndex.value === -1 ? recipe.value.image = res.url : recipe.value.steps[imgIndex.value].image = res.url
  } else {
    showFailToast('生成失败，请重试')
  }
}

const addMaterial = () => {
  if (recipe.value.materials[recipe.value.materials.length - 1].name) {
    recipe.value.materials.push({ name: '', quantity: '' });
  } else {
    showToast('请先填写该食材')
  }
}

const addStep = () => {
  if (recipe.value.steps[recipe.value.steps.length - 1].description) {
    recipe.value.steps.push({ description: '' });
  } else {
    showToast('请先填写该步骤')
  }
}

const validateForm = (flag) => {
  const { name, image, time, materials, steps, tips } = recipe.value;

  if (!name.trim()) {
    showToast('菜谱名不能为空');
    return false;
  }

  if (!image.trim()) {
    showToast('请生成一张图片');
    return false;
  }

  // 如果是发布，则继续校验其他字段
  if (flag === 1) {
    if (!time.trim()) {
      showToast('总时长不能为空');
      return false;
    }

    for (let i = 0; i < materials.length; i++) {
      const material = materials[i];
      if (!material.name.trim() || !material.quantity.trim()) {
        showToast(`第 ${i + 1} 行食材信息不完整`);
        return false;
      }
    }

    for (let i = 0; i < steps.length; i++) {
      const step = steps[i];
      if (!step.description.trim()) {
        showToast(`第 ${i + 1} 步描述不能为空`);
        return false;
      }
    }

    if (!tips.trim()) {
      showToast('烹饪心得不能为空');
      return false;
    }
  }

  return true;
};

const publish = async (flag) => {
  if (!await checkPermission()) {
    // 未登录，缓存当前菜谱数据
    localStorage.setItem('draft_recipe', JSON.stringify(recipe.value))
    return
  }
  // 先检验表单
  if (!validateForm(flag)) {
    return;
  }
  showConfirmDialog({
    message: flag === 1 ? '确认发布吗？' : '确认保存为草稿吗？',
  })
    .then(async () => {
      recipe.value.publishTime = Date.now()
      recipe.value.status = flag
      const param = recipe.value
      let res = null
      if (id) {
        res = await updateCook(id, param);
      } else {
        res = await publishCook(param);
      }
      if (res.code === 200) {
        if (flag === 1) {
          showSuccessToast(`发布成功`);
          router.push({ path: '/community' })
        } else {
          showSuccessToast(`保存成功`);
          router.push({ path: '/menu' })
        }
      } else {
        showFailToast(`${res.message}，请重试`);
      }
    })
    .catch(() => {
      // on cancel
    });
}

const deleteStep = (index) => {
  if (recipe.value.steps.length <= 1) {
    showToast('步骤不能为空')
    return
  }
  showConfirmDialog({
    message:
      `确认删除该步骤吗（第${index + 1}步）？`,
  })
    .then(() => {
      recipe.value.steps.splice(index, 1);
    })
    .catch(() => {
      return
    });
}

const generateSteps = async (cookName) => {
  if (!cookName) {
    showFailToast('请先输入菜谱');
    return
  }
  const toast = showLoadingToast({
    message: 'ai生成中...',
    forbidClick: true,
    duration: 0
  });
  try {
    const res = await generateStep(cookName)
    const text = res.msg
    // 使用正则提取所有 # 后的内容，并去除前后空格和换行
    const steps = text
      .split('\n')                   // 先按行分割
      .map(line => line.trim())     // 去除每行首尾空白
      .filter(line => line.startsWith('#')) // 只保留以 # 开头的行
      .map(line => line.slice(1).trim());   // 去掉 # 并再次 trim
    // 将步骤赋值到 recipe.value.steps.description
    recipe.value.steps = steps.map(step => ({
      description: step,
      image: '' // 默认为空，之后可上传图片
    }));
    toast.close(); // 关闭提示
    showSuccessToast('生成成功');
  } catch (error) {
    toast.close(); // 关闭提示
    console.error('生成步骤失败:', error);
    showFailToast('生成步骤失败，请重试');
  }
}

// const generateSteps = async (cookName) => {
//   if (!cookName) {
//     showFailToast('请先输入菜谱');
//     return;
//   }
//   // const stream = await get(`/api/generateStep?cookName=${encodeURIComponent(cookName)}`);
//   const stream = await generateStep(cookName)

//   const reader = stream.body.getReader();
//   const decoder = new TextDecoder();

//   let buffer = ''; // 缓存未完整行的内容

//   while (true) {
//     const { done, value } = await reader.read();
//     if (done) break;

//     buffer += decoder.decode(value, { stream: true });

//     // 按换行分割内容
//     const lines = buffer.split('\n');
//     buffer = lines.pop(); // 最后一行可能是不完整的，留在 buffer 中等待下一次拼接

//     // 处理每一行，注意去掉 'data: ' 前缀
//     lines.forEach(line => {
//       const trimmedLine = line.replace(/^data: /, '').trim();
//       if (trimmedLine.startsWith('#')) {
//         const stepText = trimmedLine.slice(1).trim();

//         // 流式添加到 recipe.value.steps
//         recipe.value.steps.push({
//           description: stepText,
//           image: ''
//         });
//       }
//     });
//   }

//   // 处理 buffer 中最后剩下的内容（可能还有最后一行）
//   if (buffer.trim()) {
//     const trimmedLine = buffer.trim().replace(/^data: /, '');
//     if (trimmedLine.startsWith('#')) {
//       const stepText = trimmedLine.slice(1).trim();
//       recipe.value.steps.push({
//         description: stepText,
//         image: ''
//       });
//     }
//   }
// };


const deleteMaterial = (index) => {
  if (recipe.value.materials.length <= 1) {
    showToast('食材不能为空')
    return
  }
  showConfirmDialog({
    message:
      `确认删除"${recipe.value.materials[index].name}"吗？`,
  })
    .then(() => {
      recipe.value.materials.splice(index, 1);
    })
    .catch(() => {
      return
    });
}
</script>

<style lang="less" scoped>
.head {
  position: sticky;
  top: 0;
  z-index: 999;
}

.showContent {
  padding: 16px;
  font-size: 14px;
  line-height: 20px;
}

.form {
  background-color: rgb(238, 240, 244);
  padding: 8px 0.5rem 0 0.5rem;

  .img {
    width: 9rem;
    height: 9rem;
    margin-bottom: 8px;
    position: relative;

    img {
      width: 100%;
      border-radius: 8px;
    }

    .uploadImg {
      position: absolute;
      right: 10px;
      bottom: 10px;
      background: rgba(0, 0, 0, 0.5);
      color: #fff;
      padding: 5px 10px;
      border-radius: 4px;
      font-size: 14px;
      display: flex;
      align-items: center;

      .iconfont {
        margin-right: 6px;
        font-size: 20px;
      }
    }
  }

  .time {
    height: 40px;
    display: flex;
    // justify-content: space-between;
    align-items: center;
    font-size: 16px;
    margin-top: 12px;

    .iconfont {
      font-size: 24px;
      margin: 0 16px;
    }

    .format {
      width: 80px;
    }
  }

  .material {
    &-title {
      height: 30px;
      line-height: 30px;
      font-weight: 700;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      &-left {
        display: flex;
        align-items: center;

        .btn {
          margin-left: 16px;
        }
      }

      .add {
        font-size: 20px;
        color: #FF9966;
      }
    }

    &-content {
      display: flex;
      margin-bottom: 8px;
      align-items: center;

      &-left {
        flex: 3;
      }

      &-right {
        flex: 1;
        margin-left: 12px;
      }

      .iconfont {
        margin-left: 6px;
        color: #FF9966;
      }
    }
  }

  .step {
    &-title {
      height: 30px;
      line-height: 30px;
      font-weight: 700;
      font-size: 14px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      &-right {
        font-size: 12px;
        font-weight: normal;
        display: flex;
        align-items: center;
      }
    }

    &-detail {
      background: #fff;
      border-radius: 8px 8px 0 0;
      margin-bottom: 4px;

      &-top {
        display: flex;
        justify-content: space-between;
        padding: 4px 12px 0 12px;

        &-number {
          width: 20px;
          height: 20px;
          text-align: center;
          line-height: 20px;
          border-radius: 50%;
          background: #FF9966;
          color: #fff;
        }

        &-operate {
          display: flex;
          align-items: center;
          color: #FF9966;

          .xiangji {
            font-size: 22px;
            margin-right: 6px;
          }
        }
      }

      &-img {
        width: 100%;

        img {
          margin-top: 8px;
          width: 100%;
          border-radius: 8px;
        }
      }
    }
  }

  .experience {
    &-title {
      height: 30px;
      line-height: 30px;
      font-weight: 700;
      font-size: 14px;
    }
  }

  .operator {
    display: grid;
    margin-top: 8px;
    grid-template-columns: 1fr 1fr;
  }
}

.display {
  width: 100%;

  .image {
    width: 1.9rem;
    height: 1.9rem;
    float: left;
    margin-left: 2px;
    margin-top: 2px;

    img {
      width: 100%;
    }
  }
}
</style>
